<!doctype html>
<html>
    <head>

        <title>jsPlumb - animation demonstration</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

        <link rel="stylesheet" href="../../css/jsplumbtoolkit-defaults.css">
        <link rel="stylesheet" href="../../css/main.css">
        <link rel="stylesheet" href="../../css/jsplumbtoolkit-demo.css">
        <link rel="stylesheet" href="demo.css">
    </head>
    <body data-demo-id="animation">

        <a style="margin:10px 0 0 10px;display:inline-block" href="https://jsplumbtoolkit.com"><img src="../../img/logo-jsplumb-green.png"></a>

        <div class="jtk-demo-main">
           	<!-- demo -->
            <div class="jtk-demo-canvas canvas-wide animation-demo jtk-surface jtk-surface-nopan" id="canvas">
                <div class="bigdot" id="bd1"></div>
                <div class="bigdot" id="bd2"></div>
                <div class="bigdot" id="bd3"></div>
                <div class="bigdot" id="bd4"></div>
            </div>
            <!-- /demo -->
            <!-- explanation -->
            <div class="description">
                <h4>ANIMATION</h4>
                <p>This is a demonstration of jsPlumb's 'animate' method.</p>
                <p>Drag orange dots to create connections.</p>
                <p>Click on or near blue dots to make them move in that direction.</p>
                <div class="commands">
                    <a id="add" href="#" class="cmd">Add a Disc</a>
                    <a id="anim-clear" href="#" class="cmd">Remove All Connections</a>
                </div>
            </div>
            <!-- /explanation -->
        </div>

        <!-- JS -->
        <script src="../../dist/js/jsplumb.js"></script>
        <!-- /JS -->

		<!--  demo code -->
		<script src="demo.js"></script>

        <script src="../demo-list.js"></script>

    </body>
</html>
